<div class="panel panel-default header-pane"
     ng-controller="HeaderController">

  <div class="panel-heading clearfix" ng-show="pipelineConfig">

    <div class="pull-left" ng-switch="activeConfigStatus.status">
      <button type="button" class="navbar-toggle collapsed"
              ng-if="activeConfigStatus.executionMode != pipelineConstant.SLAVE"
              ng-class="{'selected' : !hideLibraryPanel}"
              ng-click="toggleLibraryPanel()"
              title="{{'home.header.toggleLibraryPane' | translate}}">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="panel-title pull-left" ng-if="activeConfigStatus.executionMode === pipelineConstant.CLUSTER">
        <h3 class="pull-left" translate="home.header.clusterManagerNode">Cluster Manager: </h3>
      </div>

      <div class="panel-title pull-left" ng-if="activeConfigStatus.executionMode === pipelineConstant.SLAVE">
        <h3 class="pull-left" translate="home.header.workerNode">Worker:</h3>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="STARTING">
        <h3 class="pull-left" translate="home.header.startingPipeline">Starting Pipeline</h3>
        <i class="fa fa-spinner fa-spin fa-2x green-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="RUNNING">
        <h3 class="pull-left">{{pipelineConfig.info.name | limitTo: 40}}: </h3>
        <h3 class="pull-left" translate="home.header.uptime">Uptime</h3>

        <h3 class="pull-left"
            ng-if="!common.pipelineStatusMap[pipelineConfig.info.name].attributes || !common.pipelineStatusMap[pipelineConfig.info.name].attributes['cluster.application.startTime']"
            am-time-ago="common.pipelineStatusMap[pipelineConfig.info.name].timeStamp - common.serverTimeDifference"></h3>

        <h3 class="pull-left"
            ng-if="common.pipelineStatusMap[pipelineConfig.info.name].attributes && common.pipelineStatusMap[pipelineConfig.info.name].attributes['cluster.application.startTime']"
            am-time-ago="common.pipelineStatusMap[pipelineConfig.info.name].attributes['cluster.application.startTime'] - common.serverTimeDifference"></h3>

        <i class="fa fa-spinner fa-spin fa-2x green-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="STOPPING">
        <h3 class="pull-left" translate="home.header.stoppingPipeline">Stopping Pipeline</h3>
        <i class="fa fa-spinner fa-spin fa-2x red-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="FINISHING">
        <h3 class="pull-left" translate="home.header.finishingPipeline">Finishing Pipeline</h3>
        <i class="fa fa-spinner fa-spin fa-2x green-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="CONNECTING">
        <h3 class="pull-left" translate="home.header.connectingPipeline">Connecting ...</h3>
        <i class="fa fa-spinner fa-spin fa-2x green-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="DISCONNECTING">
        <h3 class="pull-left" translate="home.header.disconnectingPipeline">Disconnecting ...</h3>
        <i class="fa fa-spinner fa-spin fa-2x red-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="CONNECT_ERROR">
        <h3 class="pull-left" translate="home.header.connectErrorPipeline">Failed to Connect ...</h3>
        <i class="fa fa-spinner fa-spin fa-2x red-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="RETRY">
        <h3 class="pull-left" translate="home.header.retryPipeline">Retrying to start Pipeline in </h3>
        <h3 class="pull-left">{{retryCountDown | number:0}} seconds ...</h3>
        <i class="fa fa-spinner fa-spin fa-2x red-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-default>
        <h3 class="pull-left" translate="home.header.definePipeline">Define Pipeline:</h3>
        <h3 class="pull-left">{{pipelineConfig.info.name | limitTo: 40}}</h3>
      </div>

    </div>


    <div class="pull-right" ng-if="pipelineConfig && activeConfigStatus.status !== 'STOPPING' && activeConfigStatus.status !== 'CONNECTING' && activeConfigStatus.status !== 'DISCONNECTING'">

      <div class="pull-left" ng-cloak
           ng-if="!isPipelineReadOnly && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
           ng-hide="previewMode || snapshotMode || activeConfigStatus.status === 'STOPPING'">
        <div class="pipelineAgent-status pull-right" ng-hide="common.saveOperationInProgress > 0">
          <span class="glyphicon glyphicon-ok-circle"></span>
          <span translate="global.messages.info.saveOperationInProgress"></span>
        </div>

        <div class="pipelineAgent-status pull-right" ng-show="common.saveOperationInProgress > 0"
             translate="global.messages.info.savingConfiguration">
        </div>
      </div>

      <div class="btn-group" dropdown
           ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])"
           ng-hide="previewMode || snapshotMode">
       <span class="btn btn-link dropdown-toggle icon-button" dropdown-toggle aria-expanded="true"
             tooltip-placement="bottom" tooltip="{{'home.header.more' | translate}}"
             tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
             tooltip-popup-delay="500"
             ng-click="$event.stopPropagation();">
          <i class="fa fa-ellipsis-h fa-14x"></i>
        </span>
        <ul class="dropdown-menu pull-right" role="menu">

          <li role="presentation"
              ng-if="!isPipelineRunning && isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])"
              ng-class="{'disabled': !pipelineConfig.valid || activeConfigStatus.executionMode != pipelineConstant.STANDALONE}">
            <a href="#" dropdown-toggle ng-click="(!pipelineConfig.valid || activeConfigStatus.executionMode != pipelineConstant.STANDALONE) || resetOffset()">
              <i class="fa fa-power-off"></i> {{'home.resetOffset.title' | translate}}
            </a>
          </li>

          <li role="presentation"
              ng-if="!isPipelineRunning && isAuthorized([userRoles.admin, userRoles.manager]) && activeConfigStatus.executionMode != pipelineConstant.CLUSTER">
            <a href="#" dropdown-toggle ng-click="viewSnapshots()">
              <i class="glyphicon glyphicon-camera"></i> {{'home.header.snapshots' | translate}}
            </a>
          </li>

          <li role="presentation" ng-if="isPipelineRunning && !monitoringPaused">
            <a href="#" dropdown-toggle ng-click="pauseMonitoring()">
              <i class="fa fa-pause"></i> {{'home.header.pauseMonitoring' | translate}}
            </a>
          </li>

          <li role="presentation" ng-if="isPipelineRunning && monitoringPaused">
            <a href="#" dropdown-toggle ng-click="continueMonitoring()">
              <i class="fa fa-play"></i> {{'home.header.continueMonitoring' | translate}}
            </a>
          </li>

        </ul>
      </div>

      <div class="btn-group issues-dropdown"
           ng-show="pipelineConfig && pipelineConfig.issues.issueCount > 0 && !previewMode && !snapshotMode">
        <a class="btn btn-link dropdown-toggle" data-toggle="dropdown"
           tooltip-placement="top"
           tooltip="{{'home.header.issues' | translate}}"
           tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
           tooltip-popup-delay="500">
          <span class="fa fa-exclamation-triangle fa-12x"></span>
          <span ng-hide="iconOnly" translate="home.header.issues">Issues</span>
          <span class="badge" ng-bind="pipelineConfig.issues.issueCount"></span>
        </a>
        <ul class="dropdown-menu pull-right scrollable-menu" role="menu" aria-labelledby="dropdownMenu1">

          <li role="presentation" class="dropdown-header"
              ng-if="pipelineConfig.issues.pipelineIssues.length"
              translate="home.header.pipelineIssues">
            Pipeline Issues
          </li>
          <li role="presentation" ng-repeat="issue in pipelineConfig.issues.pipelineIssues">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="onIssueClick(issue)">{{issue.message}}</a>
          </li>
          <li role="presentation" class="divider" ng-if="pipelineConfig.issues.pipelineIssues.length"></li>

          <li role="presentation" class="dropdown-header"
              ng-repeat-start="(instanceName, issues) in pipelineConfig.issues.stageIssues"
              ng-bind="getStageInstanceLabel(instanceName)">
          </li>
          <li role="presentation" ng-repeat="issue in issues">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="onIssueClick(issue, instanceName)"
               ng-bind="getIssuesMessage(instanceName, issue)"></a>
          </li>
          <li ng-repeat-end role="presentation" class="divider" ng-if="!$last"></li>

        </ul>
      </div>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.undo' | translate}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
         ng-disabled="!canUndo()"
         ng-click="!canUndo() || undo()">
        <span class="fa fa-undo fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.redo' | translate}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
         ng-disabled="!canRedo()"
         ng-click="!canRedo() || redo()">
        <span class="fa fa-repeat fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{selectedType === pipelineConstant.STAGE_INSTANCE ?
          ('global.form.deleteStage' | translate) + ' ' + selectedObject.uiInfo.label : ('global.form.deleteStream' | translate)}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-disabled="selectedType === pipelineConstant.PIPELINE"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
         ng-click="(selectedType === pipelineConstant.PIPELINE) || deleteSelection()">
        <span class="fa fa-trash fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{('global.form.duplicateStage' | translate) + ' ' + selectedObject.uiInfo.label}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-disabled="selectedType !== pipelineConstant.STAGE_INSTANCE || selectedObject.uiInfo.stageType === pipelineConstant.SOURCE_STAGE_TYPE"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
         ng-click="(selectedType !== pipelineConstant.STAGE_INSTANCE || selectedObject.uiInfo.stageType === pipelineConstant.SOURCE_STAGE_TYPE) || duplicateStage()">
        <span class="glyphicon glyphicon-duplicate fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.autoArrange' | translate}}"
         tooltip-popup-delay="500"
         ng-hide="previewMode || snapshotMode || pipelineConfig.stages.length <= 1"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
         ng-click="autoArrange()">
        <span class="fa fa-random fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.snapshots' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && activeConfigStatus.executionMode != pipelineConstant.CLUSTER && isPipelineRunning && !snapshotMode && activeConfigStatus.status != 'CONNECT_ERROR' && activeConfigStatus.status != 'RETRY'"
          ng-click="viewSnapshots()">
        <span class="glyphicon glyphicon-camera fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button-danger"
          tooltip-placement="bottom" tooltip="{{'home.header.closeSnapshot' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && snapshotMode"
          ng-click="closeSnapshot()">
        <span class="glyphicon glyphicon-camera fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.preview' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE && !(isPipelineRunning || previewMode || snapshotMode)"
          ng-disabled="!pipelineConfig.previewable"
          ng-click="!pipelineConfig.previewable || previewPipeline()">
        <span class="glyphicon glyphicon-eye-open fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button-danger"
          tooltip-placement="bottom" tooltip="{{'home.header.closePreview' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && previewMode"
          ng-click="closePreview()">
        <span class="glyphicon glyphicon-eye-close fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'home.header.validate' | translate}}"
         tooltip-trigger="mouseenter"
         tooltip-popup-delay="500"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-disabled="!pipelineConfig.valid"
         ng-click="!pipelineConfig.valid || validatePipeline()">
        <span class="glyphicon glyphicon-ok-circle fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.start' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && !(isPipelineRunning || previewMode || snapshotMode)"
          ng-disabled="!pipelineConfig.valid"
          ng-click="!pipelineConfig.valid || startPipeline(); ">
        <span class="glyphicon glyphicon-play fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button-danger"
          tooltip-placement="bottom" tooltip="{{'home.header.stop' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && activeConfigStatus.executionMode != pipelineConstant.SLAVE"
          ng-click="stopPipeline()"
          ng-show="isPipelineRunning && !snapshotMode && activeConfigStatus.status != 'STARTING'">
        <span class="glyphicon glyphicon-stop fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom" tooltip="{{'home.header.stageLibrary' | translate}}"
         tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
         tooltip-popup-delay="500"
         ng-if="activeConfigStatus.executionMode != pipelineConstant.SLAVE && isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])"
         ng-class="{'btn-selected': $storage.hideStageLibraryPanel}"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-click="$storage.hideStageLibraryPanel = !$storage.hideStageLibraryPanel">
        <span class="fa fa-th fa-14x"></span>
      </a>

    </div>

  </div>

  <div class="panel-body"></div>
</div>
